<template>
    <div class="Joinus">
        <div class="hp_title">
            <h1>加入我们</h1>
        </div>

        <div class="ju_box">
            <h1>
                有关北京蔚蓝客网络科技有限公司的工作机会，请将简历发至HR@weleker.com
            </h1>

            <el-collapse
                class="aaaa"
                v-model="activeNames"
                @change="handleChange"
            >
                <el-collapse-item
                    :name="index"
                    v-for="(item, index) in info"
                    :key="index"
                    @click="goClick(index)"
                    class="ccc"
                >
                    <template slot="title">
                        <div class="bbbb">
                            <span>{{ item.title }}</span>
                            <img
                                src="../../assets/img/jiajianew.png"
                                v-if="!item.imgtype"
                                alt=""
                            />
                            <img
                                src="../../assets/img/jianjiannew.png"
                                v-if="item.imgtype"
                                alt=""
                            />
                        </div>
                    </template>
                    <h2 v-html="item.content"></h2>
                </el-collapse-item>
            </el-collapse>
        </div>
    </div>
</template>

<script>
import { axiosGet } from '../../server/axios';
export default {
    name: 'JoinUs',
    props: {
        msg: String,
    },
    data() {
        return {
            info: [],
            icurContent: '',
            icur: 0,
            activeNames: [],
        };
    },
    mounted() {
        this.getDetial();
    },
    methods: {
        handleChange(val) {
            if (val.length == 0) {
                this.info.map((item) => (item.imgtype = false));
            }
            val.map((item) => {
                this.info.map((res, index) => {
                    console.log(res);
                    if (index == item) {
                        this.info[index].imgtype = true;
                    } else {
                        this.info[index].imgtype = false;
                    }
                });
            });
        },
        goClick(index) {
            this.icur = index;
        },
        getDetial() {
            axiosGet(`/api/content/join_us`, {}, (res) => {
                console.log(res.data);
                if (res.code != 'ok') {
                    this.$notify({
                        title: '警告',
                        message: res.msg,
                        type: 'warning',
                    });
                }
                this.info = res.data;

                this.info.map((item) => (item.imgtype = false));
            });
        },
    },
};
</script>
<style scoped lang="scss">
::v-deep .el-collapse-item__arrow {
    display: none;
}
::v-deep .el-collapse-item__header {
    height: auto;
    line-height: normal;
    border: 0;
}
::v-deep .el-collapse-item__wrap {
    border: 0;
}
.ccc {
    // margin-bottom: 10px;
}
.aaaa {
    width: 570px;
    margin-top: 30px;
}
@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -50%, 0);
        transform: translate3d(0, -50%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -50%, 0);
        transform: translate3d(0, -50%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}
@-webkit-keyframes slideInDown {
    0% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

@keyframes slideInDown {
    0% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        visibility: visible;
    }

    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

.slideInDown {
    -webkit-animation-name: slideInDown;
    animation-name: slideInDown;
}
.animated {
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.Joinus {
    font-size: 16px;
    font-family: Source Han Sans SC VF;
    font-weight: 400;
    color: #787878;
    line-height: 30px;
}
.bbbb {
    width: 570px;
    height: 60px;
    background: #f6f6f6;

    display: flex;
    justify-content: center;
    align-items: center;

    cursor: pointer;
    margin-bottom: 10px;

    span:hover {
        color: #e60012;
    }
    span {
        width: 280px;
        font-size: 16px;
        font-family: Source Han Sans SC VF;
        font-weight: 400;
        text-align: center;
        color: #000000;
    }
}
.ju_box {
    padding: 0 30px;

    h1 {
        font-size: 16px;
        font-family: Source Han Sans SC VF;
        font-weight: 400;
        color: #000000;
    }

    ul {
        margin: 30px 0 10px;
        overflow: hidden;
        li {
            width: 570px;
            margin: 0 20px 20px 0;
            div {
                width: 570px;
                height: 60px;
                background: #f6f6f6;

                display: flex;
                justify-content: center;
                align-items: center;

                cursor: pointer;
                margin-bottom: 10px;
            }

            span:hover {
                color: #e60012;
            }
            span {
                width: 280px;
                font-size: 16px;
                font-family: Source Han Sans SC VF;
                font-weight: 400;
                text-align: center;
                color: #000000;
            }
        }
    }

    h2 {
        background: #f6f6f6;
        width: 510px;
        padding: 30px;
        font-size: 16px;
        font-family: Source Han Sans SC VF;
        font-weight: 400;
        color: #000000;
    }
}
</style>
